<template>
  <p-card :bordered="false">
    <div>路径维护</div>

    <p-row :gutter="24">
      <p-col :xl="8" :lg="12" :md="12" :sm="24">
        <p-button type="primary" @click="showModal()">新增</p-button>
        <p-button type="primary" @click="showPreview()" style="margin-left: 10px; margin-bottom: 10px;">路径预览</p-button>
      </p-col>
    </p-row>

    <p-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleDelete(record.id)">删除</a>
      </span>

    </p-table>

    <TrainPathDetailModal ref="trainPathDetailModal" :selectedId="selectedId" @handleSuccess="handleSuccess"></TrainPathDetailModal>
    <TrainPathDetailPreview ref="trainPathDetailPreview" :trainPathDetailList = 'dataSource'></TrainPathDetailPreview>
  </p-card>
</template>

<script type="text/javascript">
import {
  postAction,
  getAction,
  putAction,
  api,
  deleteAction,
} from "@/api/manage";
import TrainPathDetailModal from "./trainPathDetailModal.vue";
import TrainPathDetailPreview from "./trainPathDetailPreview.vue";

export default {
  props: {
    selectedId: String || Number
  },
  data() {
    return {
      /* table加载状态 */
      loading: false,
      /* 分页参数 */
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },
        {
          title: "项目内容",
          align: "center",
          dataIndex: "projectContent",
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      dataSource: [],
      url: {
        list: "/mes-manpower/mesHrTrainPathDetail/list",
        delete: "/mes-manpower/mesHrTrainPathDetail",
      },
    };
  },

  watch: {
    selectedId(newVal, oldVal) {
      this.loadData();
    },
  },

  mounted() {},
  methods: {
    loadData() {
      this.loading = true;
      const params = {
        trainPathId: this.selectedId,
        limit: 100000,
        pageNo: 1
      };
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.data.records;
        }
        if (res.code === 510) {
          this.$message.warning(res.msg);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      });
    },


    showModal() {
      this.$refs.trainPathDetailModal.showModal();
    },

    showPreview(){
      this.$refs.trainPathDetailPreview.showModal()
    },

    handleSuccess(){
      this.loadData();
    },

  onSwitchChange(record){
    const params = {
      status: record.status ? 1 : 0,
      id: record.id,
    }
    putAction(this.url.edit, params).then( res => {
      if (res.success) {
        this.$message.success("修改状态成功!")
      } else {
        this.$message.error("修改状态失败!")
        record.status = !record.status
      }
    } )
  },


    // 删除
    handleDelete(id) {
      deleteAction(`${this.url.delete}/${id}`).then((res) => {
        if (res.success) {
          this.loadData();
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      });
    },
  },
  components: {
    TrainPathDetailModal,
    TrainPathDetailPreview    
  },
};
</script>

<style lang="less" scoped>
</style>
